<template>
	<view class="addEditForm">
		<gui-back v-if="optionDisabled"></gui-back>
		<view class="data-form bgfff">
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">区域名称</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.name"
						:placeholder="optionDisabled?'-':'请输入区域名称'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac" v-if="!optionDisabled">
				<text class="data-form-label f30 require">上传图片</text>
				<view class="data-form-input">
					<gui-upload-images2 @change="choosePhoto" fileName="file" ref="uploadimgcom" @uploaded="uploaded"
						:uploadServerUrl="`${$http.config.baseUrl}/common/upload`"
						:maxFileNumber="9"></gui-upload-images2>
				</view>
			</view>
			<view class="data-form-item flex-ac" v-else>
				<text class="data-form-label f30 require">上传图片</text>
				<view class="data-form-input">
					<view class="img-module flex-ac-wrap flex1">
						<image class="img-module-item" v-for="(img,imgIdx) in dataForm.picture.split(',')" :key="imgIdx"
							@tap="previewImg(dataForm.picture.split(','),imgIdx)"
							:src="img" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="right-area-footer2 flex-ac bgfff" v-if="!optionDisabled">
			<view class="saveBtn cancleBtn" @tap="handleCancle">取消</view>
			<view class="saveBtn" @tap="handleSubmit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				did: '',
				dataForm: { //表单
				    id:'',
					name: '',
					picture: ''
				},
				optionDisabled: false,
				needPploadedImgs: [], //选择图片列表
			}
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.optionDisabled = options.op == 'look' ? true : false
			let title = options.op == 'look' ? '详情' : options.op == 'add' ? '新增' : '编辑'
			uni.setNavigationBarTitle({
				title
			})
			if(this.did) {
				this.loadDetail()
			}
		},
		methods: {
			loadDetail() {
				this.$http.get(`/archives/canteenArea/${this.did}`).then(res => {
					if (res.code == 200) {
						console.log('res',res);
						let result = res.data
						Object.keys(this.dataForm).forEach(key=>this.dataForm[key]=result[key])
						console.log('this.dataForm',this.dataForm);
						if(this.did&&!this.optionDisabled){
							this.$refs.uploadimgcom.setItems(this.dataForm.picture.split(','));
						}
					}
				})
			},
			handleCancle() {
				this.$u.back()
			},
			handleSubmit() {
				if (!this.dataForm.name) return this.$u.msg("请输入区域名称！");
				if (this.needPploadedImgs.length < 1) return this.$u.msg("请上传图片！");
				if (this.needPploadedImgs.length > 0) return this.$refs.uploadimgcom.upload();
				this.realSumbit();
			},
			realSumbit() {
				if (this.did) {
					this.dataForm.id = this.did
					this.$http.put('/archives/canteenArea', this.dataForm).then(res => {
						if (res.code == 200) {
							uni.$emit('reFlashList')
							this.$u.msg('修改成功!')
							this.$u.back(1, 1000)
						}
					})
				} else {
					this.$http.post('/archives/canteenArea', this.dataForm).then(res => {
						if (res.code == 200) {
							uni.$emit('reFlashList')
							this.$u.msg('新增成功!')
							this.$u.back(1, 1000)
						}
					})
				}
			},
			previewImg(img, idx) {
				let urls = img.split(',')
				uni.previewImage({
					urls,
					current: idx
				})
			},
			choosePhoto(e) { //选择图片
				this.needPploadedImgs = e;
			}, // 图片上传完毕执行 uploaded 函数
			uploaded: function(uploadedImgs) {
				console.log('图片上传完毕，开始提交数据');
				// 组合数据给后端 api 提交
				console.log(uploadedImgs);
				let arr = []
				for (var i = 0; i < uploadedImgs.length; i++) {
					arr.push(uploadedImgs[i].url)
				}
				this.dataForm.picture = arr.join();
				console.log(this.dataForm);
				this.realSumbit();
			},

		}
	}
</script>

<style>

</style>